<template>
  <div class="box">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home/ordertotal' }"
        >订单管理</el-breadcrumb-item
      >
      <el-breadcrumb-item
        ><a href="/home/houseorder">房屋订单</a></el-breadcrumb-item
      >
    </el-breadcrumb>

    <div class="data">
      <div class="top">
        <p class="order">全部订单</p>
        <p class="change">
          <el-select v-model="select" placeholder="已支付">
            <el-option label="已支付" value="1" />
            <el-option label="未支付" value="2" />
          </el-select>
        </p>
        <el-input
          v-model="input"
          class="w-50 m-2"
          placeholder="请输入需要查询的订单编号"
          :suffix-icon="Search"
          @blur="search"
        />

        <el-button
          type="primary"
          text
          @click="dialogVisible = true"
          :icon="Plus"
          >添加
        </el-button>
        <div class="add">
          <el-dialog
            v-model="dialogVisible"
            title="新增订单信息"
            width="40%"
            :before-close="handleClose"
          >
            <p>
              <span>订单类型:</span>
              <el-select v-model="typevalue" class="m-2" placeholder="请选择">
                <el-option label="租房" value="租房" />
                <el-option label="家服" value="家服" />
                <el-option label="维修" value="维修" />
              </el-select>
            </p>
            <p>
              <span>订单编号:</span>
              <el-input v-model="numinput" placeholder=" 请输入数字" />
            </p>
            <p>
              <span>姓名:</span>
              <el-input v-model="nameinput" placeholder=" 请输入文字" />
            </p>
            <p>
              <span> 性别:</span>
              <el-select v-model="sex" class="m-2" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </p>
            <p>
              <span> 联系电话:</span>

              <el-input v-model="phoneinput" placeholder=" 请输入数字" />
            </p>

            <p>
              <span>支付方式: </span>
              <el-select v-model="pay" class="m-2" placeholder="请选择">
                <el-option label="微信支付" value="微信支付" />
                <el-option label="支付宝支付" value="支付宝支付" />
                <el-option label="银行卡支付" value="银行卡支付" />
              </el-select>
            </p>

            <p>
              <span>订单创建日期： </span>
              <el-date-picker
                v-model="time"
                type="date"
                placeholder="Pick a day"
                :size="size"
              />
            </p>

            <p>
              <span> 收入:</span>
              <el-input
                type="number"
                v-model="money"
                placeholder=" 请输入数字"
              />
            </p>
            <p class="msg" v-show="show">必须输入订单类型,姓名和收入</p>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save"> 保存 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
      <div class="list">
        <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="setCellColor"
        >
          <el-table-column
            prop="type"
            label="订单类型"
            :filters="[{ text: '租房' }]"
          />
          <el-table-column prop="num" label="订单编号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="sex" label="性别" />
          <el-table-column prop="phone" label="联系电话" width="130" />
          <el-table-column prop="paytype" label="支付方式" width="130" />
          <el-table-column label="订单创建日期" width="180">
            <template #default="scope">
              <span>{{ formatTime(scope.row.time) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="收入" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button>编辑</el-button>
              <el-button text @click="open(scope.row.num)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="total"
          @current-change="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">  
import { ref, onMounted } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import "@/mock/houseorder";
import axios from "axios";
const select = ref("");
const typevalue = ref("");
const nameinput = ref();
const numinput = ref();
const sex = ref();
const phoneinput = ref();
const pay = ref();
const time = ref();
const money = ref();
const size = ref<"default">("default");
const input = ref("");

let show = ref(false);

interface itemType {
  type: string;
  num: number;
  time: number;
  name: string;
  sex: string;
  phone: number;
  paytype: string;
  money: string;
}

const tableData = ref<itemType[]>([]);
const total = ref<number>(0);

let page = 1;

onMounted(() => {
  getData();
});

const getData = () => {
  axios
    .post("/api/houseorder", {
      pageSize: 10,
      currentPage: page,
      search: input.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

const formatTime = (time: number) => {
  const date = new Date(time);
  const y = date.getFullYear();
  const m = date.getMonth() + 1;
  const d = date.getDate();

  return y + "." + m + "." + d;
};

const changePage = (page1: number) => {
  page = page1;

  getData();
};

const setCellColor = ({ columnIndex }: any) => {
  if (columnIndex === 7) {
    return { color: "#FF8F4D" };
  }
};

const search = () => {
  page = 1;
  getData();
};

const open = (id: number) => {
  ElMessageBox.confirm("确认删除此订单吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.post("/api/houseorder/del", { num: id }).then((res) => {
        getData();
      });
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确认关闭吗?您的内容还未保存")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const save = () => {
  axios
    .post("/api/houseorder/add", {
      type: typevalue.value,
      num: numinput.value,
      time: new Date(time.value).getTime(),
      name: nameinput.value,
      sex: sex.value,
      phone: phoneinput.value,
      paytype: pay.value,
      money: money.value,
    })
    .then((res) => {
      if (res.data.status === 0) {
        getData();
      } else {
        show.value = true;
        dialogVisible.value = true;
      }
    });

  dialogVisible.value = false;
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  .el-breadcrumb {
    width: 100%;
    height: 56px;
    line-height: 56px;
  }
  :deep(.el-breadcrumb__inner) {
    font-weight: normal;
    color: #888;
    font-size: 16px;
  }
  :deep(.el-breadcrumb__separator) {
    color: #555;
    font-size: 16px;
  }
  :deep(.el-breadcrumb__inner > a) {
    font-size: 16px;
    color: #555;
    font-weight: 600;
  }

  .data {
    flex: 1;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    .top {
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      .order {
        font-size: 16px;
        color: #555;
        margin-left: 15px;
      }
      .change {
        width: 200px;
        height: 30px;
        color: #555;
        margin-left: 15px;
        :deep(.el-icon) {
          font-size: 16px;
        }
      }
      .w-50 {
        width: 300px;
        height: 28px;
        position: absolute;
        right: 150px;
        :deep(.el-input__wrapper) {
          border-radius: 10px;
          background-color: rgb(244, 242, 242);
        }
      }
      :deep(.el-button) {
        background-color: #4ca4fe;
        color: #fff;
        width: 90px;
        position: absolute;
        right: 30px;
      }

      :deep(.el-dialog__header) {
        text-align: center;
      }
    }
    .add {
      p {
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 16px;
      }
      span {
        display: inline-block;
        width: 120px;
      }
      .el-input {
        width: 200px;
      }
      .dialog-footer button:first-child {
        margin-right: 300px;
        margin-top: -30px;
      }
      .dialog-footer button:last-child {
        margin-right: 50px;
        margin-top: -30px;
        border: 0;
        background-color: #ff8f4d;
      }
      .msg {
        text-align: center;
        color: red;
        font-size: 20px;
      }
    }
    :deep(th.el-table__cell) {
      background-color: #4ca4fe;
      height: 50px;
      color: #fff;
    }
    :deep(.el-table__cell) {
      text-align: center;
      .el-button {
        border: none;
        color: #4ca4fe;
      }
      .el-table__column-filter-trigger i {
        font-size: 18px;
        color: #fff;
        margin-left: 10px;
      }
    }
    .el-pagination {
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
}
</style>
